<template>
	<view>
		<view class="main">
			<view class="search-list" v-if="flag">
				<view class="search-item" v-for="item in searchList">
					<view class="left">
						<text class="title">{{item.title}}</text>
						<view class="bar">
							<text>{{item.readNum}} 看过</text>
							<text>{{item.likeNum}} 点赞</text>
						</view>
					</view>
					<navigator :url="`/pages/news-detail/news-detail?id=${item.id}`" class="right">
						<image :src="$baseUrl + item.cover" mode=""></image>
					</navigator>
				</view>
				<u-loadmore :status="status" />
			</view>
			<view class="empty" v-else>
				<u-empty text="无搜索结果" mode="search"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				key: '',
				flag: false,
				status: 'nomore'
			};
		},
		onLoad(option) {
			this.key = option.key
			this.getData()
		},
		methods: {
			 getData(){
				this.$request({
					url: '/prod-api/press/press/list'
				}).then(res => {
					console.log(res)
					this.newsList = res.rows
					this.flag = true
				})
				// this.searchList = res.
			}
		},
		computed: {
			searchList(){
				if(this.key === ''){
					this.flag = false
					return []
				}else{
					return this.newsList.filter(item => item.title.includes(this.key))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		view{
			height: 100%;
			.main{
				height: 100%;
				.search-list{
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					.search-item{
						padding: 20rpx 0;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						border-top: 2rpx solid #e4e7ed;
						.left{
							.title{
								width: 460rpx;
								height: 120rpx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
								font-size: 32rpx;
								font-weight: bold;
								line-height: 1.8;
							}
							.bar{
								margin-top: 50rpx;
								text{
									font-size: 22rpx;
									color: #909399;
									&:last-child{
										margin-left: 20rpx;
									}
								}
							}
						}
						.right{
							display: flex;
							justify-content: center;
							align-items: center;
							image{
								width: 250rpx;
								height: 200rpx;
							}
						}
					}
				}
				.empty{
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					u-empty{
						flex: 1;
					}
				}
			}
		}
	}
</style>
